﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="TabStrip.aspx.cs" Inherits="ControlExplorer.C1Tabs.TabStrip" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Tabs" TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
    <style type="text/css">
        .ui-tabs .ui-tabs-panel
        {
            padding-top: 0;
            padding-bottom: 0;
        }
        
        .ui-tabs-left, .ui-tabs-left .ui-tabs-nav
        {
            width: 140px;
        }
        
        .ui-tabs-left .wijmo-wijtabs-content
        {
            width: 0;
        }
        
        .message
        {
            font-size: 3em;
        }
    </style>
    <script type="text/javascript">

        function TabSelected(e, ui) {
            $("#<%=msg.ClientID%>").text("已选择 "+"Tab <" + $(ui.tab).text()+">");
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <wijmo:C1Tabs ID="C1Tab1" runat="server" OnClientSelect="TabSelected">
        <Pages>
            <wijmo:C1TabPage ID="Page1" Text="通常">
            </wijmo:C1TabPage>
            <wijmo:C1TabPage ID="Page2" Text="控件">
            </wijmo:C1TabPage>
            <wijmo:C1TabPage ID="Page3" Text="关于">
            </wijmo:C1TabPage>
        </Pages>
    </wijmo:C1Tabs>
    <wijmo:C1Tabs ID="C1Tabs2" runat="server" OnClientSelect="TabSelected" Alignment="Left" Width="100%">
        <Pages>
            <wijmo:C1TabPage ID="Page4" Text="书籍">
            </wijmo:C1TabPage>
            <wijmo:C1TabPage ID="Page5" Text="CD">
            </wijmo:C1TabPage>
            <wijmo:C1TabPage ID="Page6" Text="磁带">
            </wijmo:C1TabPage>
        </Pages>
    </wijmo:C1Tabs>
    <asp:Label ID="msg" runat="server" Text="" CssClass="message"></asp:Label>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
        此示例展示了如何用<strong>C1Tabs</strong>控件模拟一个简单的TabStrip的UI。
    </p>
    <p>
        对于水平方向的的条形选项卡，我们可以用空白内容填充C1Tabs控件，把垂直方向填充为0。
    </p>
    <p>
        对于垂直方向的的条形选项卡，我们可以用空白内容填充C1Tabs控件，标签和内容区域的宽度需要设置一个合适的值。
    </p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
